import React from 'react';
import { IndustryType, imageMap } from '@/common/types';
import logo from '@/assets/icons/ai-logo-eai.svg';

import { SvgIcon } from '@/components/icon';
import { getFilenameFromPath } from '@/utils/common';
import { defaultImgList } from '@/common/app/constants';
import { DEFAULT_IMAGES, DEFAULT_LOGOS } from '@/components/work-modal/components/ImageDisplay';

interface AppImageDisplayProps {
  sceneImageConfig?: string;
  appLogo?: string;
  workflow?: any;
  chatStarted?: boolean;
}

const AppImageDisplay: React.FC<AppImageDisplayProps> = ({
  sceneImageConfig,
  appLogo,
  workflow,
  chatStarted,
}) => {


  const isWorkflow = workflow && !chatStarted;

  if (sceneImageConfig && sceneImageConfig.length > 100) {
    return (
      <div style={{ width: '200px', maxWidth: '100%', height: '200px', padding: '0 5px' }}>
        <img
          src={`data:image/png;base64,${sceneImageConfig}`}
          width={'100%'}
          height={isWorkflow ? 100 : 200}
          alt=""
        />
      </div>
    );
  }

  return (
    <div
      className="flex items-center justify-center"
      style={{
        width: '360px',
        maxWidth: '100%',
        height: isWorkflow ? '100px' : '200px',
        padding: '0 5px',
      }}
    >

      {sceneImageConfig?.endsWith('.svg') ?
        <SvgIcon
          icon={getFilenameFromPath(sceneImageConfig!).replace('.svg', '').replace('.svg', '')}
          size={isWorkflow ? 100 : 200}
        />
        :

        sceneImageConfig ? (
          (!DEFAULT_IMAGES[sceneImageConfig as IndustryType]) ? (
            <img
              src={sceneImageConfig}
              alt=""
              style={{
                width: isWorkflow ? '100px' : 'unset',
                height: isWorkflow ? '100px' : '200px',
                margin: 'auto',
              }}
            />
          ) : <img
            src={DEFAULT_IMAGES[sceneImageConfig as IndustryType]}
            alt=""
            style={{
              width: isWorkflow ? '100px' : 'unset',
              height: isWorkflow ? '100px' : '200px',
              margin: isWorkflow ? 'auto' : 'unset',
            }}
          />
        ) : (appLogo && DEFAULT_IMAGES[appLogo]) ? (
          <img
            src={DEFAULT_IMAGES[appLogo]}
            alt=""
            style={{
              width: isWorkflow ? '100px' : '200px',
              height: isWorkflow ? '100px' : '200px',
              margin: 'auto',
            }}
          />
        ) : (
          appLogo?.endsWith('.svg') ?
            <SvgIcon
              icon={getFilenameFromPath(appLogo!).replace('.svg', '').replace('.svg', '')}
              size={isWorkflow ? 100 : 200}
            />
            :
            <img src={appLogo} width={isWorkflow ? 100 : 200} height={isWorkflow ? 100 : 200} alt="" />
        )

      }

    </div>
  );
};

export default AppImageDisplay; 